<template>
  <jy-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
    <div class="title">中间计量附件</div>
    <!-- 文件列表 -->
    <el-card shadow="never" v-if="ossList.length > 0">
      <div class="file-li" v-for="(file, index) in ossList" :key="index">
        <el-link class="el-link-text" @click="download(file)" :underline="false" target="_blank">
          <span class="el-icon-document"> {{ getFileName(file.originalName) }} </span>
        </el-link>
        <div class="action">
          <el-button size="mini" type="text" icon="el-icon-view" @click="previewFile(file)">预览</el-button>
        </div>
      </div>
    </el-card>
    <el-empty v-else description="暂无数据..." :image-size="100"></el-empty>

    <div class="title">工序报验附件</div>
    <el-row :gutter="10">
      <el-col :span="4" :xs="24">
        <div class="dialog-table-border">
          <el-tree :data="treeList" :props="defaultProps" ref="tree" node-key="id" highlight-current
            @node-click="handleNodeClick">
            <div slot-scope="{node, data}" class="custom-tree-node" :title="node.label" v-text="node.label"></div>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card shadow="never" v-if="fileList.length > 0">
          <div class="file-li" v-for="(file, index) in fileList" :key="index">
            <el-link class="el-link-text" @click="download(file)" :underline="false" target="_blank">
              <span class="el-icon-document"> {{ getFileName(file.originalName) }} </span>
            </el-link>
            <div class="action">
              <el-button size="mini" type="text" icon="el-icon-view" @click="previewFile(file)">预览</el-button>
            </div>
          </div>
        </el-card>
        <el-empty v-else description="暂无数据..." :image-size="150"></el-empty>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">关 闭</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { getToken } from "@/utils/auth";
import { listOss, delOss } from "@/api/system/oss";
import { fbxGxTree, getGxbyFiles } from "@/api/pl/bsProcessInspection";
export default {
  name: 'FileUploadView',
  props: {
    moduleKey: {
      type: String,
      default: ""
    },

  },

  data () {
    return {
      loading: false,
      title: "附件",
      open: false,
      businessId: null,
      subBusinessId: null,
      ossList: [],
      fileList: [],
      treeList: [],
      treeInfo: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
    };
  },
  computed: {
    // 是否显示提示
    showTip () {
      return !this.disabled && this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init (row) {
      const { businessId, subBusinessId } = row;
      this.ossList = [];
      this.businessId = businessId;
      this.subBusinessId = subBusinessId;
      this.getList();
      this.getTree();
      this.open = true;
    },
    getList () {
      this.loading = true;
      const queryParams = {
        pageNum: 1,
        pageSize: 100,
        moduleKey: this.moduleKey,
        businessId: this.businessId,
        subBusinessId: this.subBusinessId,
      };
      listOss(queryParams).then((response) => {
        this.ossList = response.rows;
        this.loading = false;
      });
    },
    cancel () {
      this.ossList = [];
      this.open = false;
    },
    getTree () {
      const queryParams = {
        zdId: this.businessId,
        qsId: this.subBusinessId,
      };
      fbxGxTree(queryParams).then((response) => {
        this.treeList = response.data;
      });
    },
    handleNodeClick (data) {
      if (data.type == 'gxby') {
        this.treeInfo = data;
        this.getFileList();
      }
    },
    getFileList () {
      this.loading = true;
      const queryParams = {
        id: this.treeInfo.id,
      };
      getGxbyFiles(queryParams).then((response) => {
        this.fileList = response.data;
        this.loading = false;
      });
    },
    // 获取文件名称
    getFileName (name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    // 对象转成指定字符串分隔
    listToString (list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        strs += list[i].ossId + separator;
      }
      return strs != "" ? strs.substr(0, strs.length - 1) : "";
    },
    // 文件地址转换
    fileUrlTransition (url) {
      if (process.env.VUE_APP_FILE_PATH != undefined) {
        // 截取路径前半部分
        const path = process.env.VUE_APP_OSS_PATH;
        if (url.lastIndexOf(path) > -1) {
          return location.origin + process.env.VUE_APP_FILE_PATH + url.slice(url.lastIndexOf(path) + path.length);
        }
      }
      return url;
    },
    // 下载
    async download (row) {
      this.$download.oss(row.ossId);
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin: 10px;
  font-size: 18px;
}

.upload-file-uploader {
  margin-bottom: 5px;
}



.file-li {
  // border: 1px solid #e4e7ed;
  line-height: 1.8;
  margin-bottom: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;

  .action {
    width: 100px;
    padding-right: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
